<template>
<div>
  <div v-if="manualConceal" class="title">
    <p class="xuanze">请选择证书录入方式</p>
    <el-row>
      <el-col class="col-se" :span="24">
        <div class="col-div"></div>
      </el-col>
    </el-row>
    <el-row class="row-s" :gutter="10">
      <!-- 智能 -->
      <el-col :span="5">
        <div class="col-spans"></div>
      </el-col>
      <el-col class="entering-intelligent" :span="7">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">证书图片智能识别录入</p>
        </div>
        <el-card class="intelligent-card" shadow="hover">
          <i class="el-icon-camera-solid tubiao"></i>
          <div>
          <!-- 智能添加的el-upload -->
          <!-- <el-upload
            class="upload-intelligent"
            :headers="myHeader"
            :limit="limitNum"
            accept=".png,.jpg,.pdf"
            :action="uploadUrls()"
            ref="refcertiUpload"
            :before-upload="beforeAvatarUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :on-progress="onProgress"
            >
            <el-button class="el-upload__text">点击上传</el-button>
          </el-upload> -->
          <!-- 智能添加的el-upload结束 -->
          </div>
          <p class="tishi">自动识别，格式：jpg、png、pdf ！图片大小不得超过1.5M ！</p>
        </el-card>
      </el-col>
      <!-- 手动 -->
      <el-col class="entering-manual" :span="7">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">手动录入</p>
        </div>
        <el-card class="manual-card" shadow="hover">
          <i class="el-icon-edit tubiao"></i>
          <div>
            <el-button @click="clickManualConceal()" class="shangchuan">手动添加</el-button>
          </div>
          <p class="tishi">手动添加证书人员信息</p>
        </el-card>
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
  </div>
  <subfolder-manual v-else @routerBack="manualConceal = true"></subfolder-manual>
</div>
</template>
<script>
import SubfolderManual from './subfolder/subfolder-manual'
import { Loading } from 'element-ui'
import Vue from 'vue'
export default {
  data () {
    return {
      manualConceal:true,
    }
  },
  components: {
    SubfolderManual
  },
  computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
    }
  },
  watch: {
    // 区别 智能和手动 打开的手动录入
    manualConceal: {
      handler(val){
        if(val){
          this.dateFrom = {};
          this.img = []
        }
      }
    }
  },
  methods: {
    clickManualConceal(){
      this.manualConceal = false
    }
  }
}
</script>
<style scoped lang="scss">
.title {
  width: 100%;
  min-height: 100% !important;
  background-color: #ffffff;
  .xuanze {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 1.17em;
    font-weight: 700;
    color: #333333;
  }
  .col-se{
    height: 30%;
    .col-div{
      height: 109px;
      width: 100%;
      // background-color: aqua;

    }
  }
  .consequence{
    width: 100%;
    background-color: aqua;
    height: 60px;
    text-align: center;
    background-color: #FAFAFAFF;
    .consequence-s{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .chenggong{
    width: 20px;
    color: #09AB6E;
    margin-right: 10px;
    }
    float: left;
     width: 50%;
     height: 60px;
     font-size: 15px;
     border: 1px solid #ccc;
    text-align: center;
    }
    .consequence-e{
      div{
      height: 15px;
      margin-top: 15px;
    }
    .shibai{
    width: 20px;
    color: red;
    margin-right: 10px;
      }
     float: left;
     width: 50%;
     height: 60px;
     text-align: center;
     font-size: 15px;
     border: 1px solid #ccc;
    }
  }
  .row-s {
    margin-top: 15px;
    // height: 700px;
    min-height: 100%;
    padding-bottom: 20%;
    .col-spans{
      height: 50px;
    }
    // 智能
    .entering-intelligent {
      // margin-left: 40px;
      height: 100%;
      .in-t{
        height: 16px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
      // 点击图片
      .intelligent-card {
        margin-top: 20px;
        height: 240px;
        padding: 20px;
        background-color: #f8f9fa;
        text-align: center;
        .tubiao {
          margin-top: 10px;
          padding-bottom: 15px;
          font-size: 64px;
          color: #6E92E9;
        }
        .shangchuan {
          margin-bottom: 5px;
        }
        .tishi {
          margin-top: 15px;
          padding-bottom: 32px;
          font-size: 10px;
          font-weight: 400;
          color: #999999;
          line-height: 26px;
        }
      }
    }
    .title .row-s .entering-intelligent .intelligent-card{
      background-color: #ffffff !important;
    }
    // 手动
    .entering-manual {
      margin-left: 10px;
      height: 280px;
      // background-color: #f8f9fa;
      .in-t{
        height: 16px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
      // 点击图片
      .manual-card {
        margin-top: 20px;
        height: 240px;
        padding: 20px !important;
        background-color: #f8f9fa;
        text-align: center;
        .tishi {
          font-size: 10px;
          padding-top: 0px;
          padding-bottom: 35px;
          font-weight: 400;
          color: #999999;
        }
        .shangchuan {
          margin-bottom: 15px;
        }
        .tubiao {
          margin-top: 20px;
          margin-bottom: 15px;
          font-size: 64px;
          color: #6E92E9;
        }
      }
    }
    // 批量
    .entering-batch {
      margin-left: 10px;
      margin-bottom: 70px;
      height: 100%;
      .in-t{
        height: 16px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
      // 点击图片
      .batch-card {
        padding: 20px;
        margin-top: 20px;
        background-color: #f8f9fa;
        .xiazai {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .tishi {
          margin-top: 5px;
          margin-left: 30px;
          font-size: 10px;
          font-weight: 400;
          color: #999999;
        }
        .el-template {
          width: 140px;
          height: 36px;
          margin-top: 5px;
          margin-left: 40px;
          margin-bottom: 5px;
          font-size: 13px;
          background-color: #ffffff;
        }
        .choice {
          height: 210px;
          margin-top: 10px;
          margin-bottom: 10px;
          background-color: #F5F7FA;
          text-align: center;
          .tishis {
            font-size: 10px;
            margin-top: 14px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color:#6E92E9;
          }
        }
        .matching{
          height: 210px;
          margin-top: 20px;
          margin-bottom: 10px;
          text-align: center;
          background-color: #F5F7FA;
          .tishis {
            font-size: 10px;
            margin-top: 4px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color: #6E92E9;
          }
        }
      }
    }
  }
}
.upload-intelligent{
  text-align: center;
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
